<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
    <!-- 查询搜索框 -->
    <el-form inline :model="dataForm" label-width="100px" style="margin-bottom: 10px;" @keyup.enter.native="getDataList">
      <el-form-item label="查询角度">
        <el-radio v-model="dataForm.queryPoint" label="1">商品</el-radio>
        <el-radio v-model="dataForm.queryPoint" label="2">品种</el-radio>
      </el-form-item>
      <el-form-item label="品种零售价">
        <el-radio v-model="dataForm.groupFlag" label="1">分组</el-radio>
        <el-radio v-model="dataForm.groupFlag" label="2">不分组</el-radio>
      </el-form-item>
      <el-form-item label="筛选库存信息">
        <el-select v-model="dataForm.quantityCheck">
          <el-option v-for="item in quantityCheckOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品编码">
        <el-input v-model="dataForm.goodsCode"></el-input>
      </el-form-item>
      <el-form-item label="商品条码">
        <el-input v-model="dataForm.goodsBarcode"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="dataForm.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="dataForm.ctgId" @change="ctgIdChange" clearable>
          <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="制造商">
        <el-input v-model="dataForm.supplyName">
          <el-button slot="append" @click="chooseSupply">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="品种">
        <el-input v-model="dataForm.brandName">
          <el-button slot="append" @click="getBrandList">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="球镜范围" v-if="dataForm.ctgId == '8'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="厂家型号" v-if="dataForm.ctgId == '1' || dataForm.ctgId == '6' || dataForm.ctgId == '8'">
        <el-input v-model="dataForm.manufacturerSpec"></el-input>
      </el-form-item>
      <el-form-item label="厂家色号" v-if="dataForm.ctgId == '1' || dataForm.ctgId == '6' || dataForm.ctgId == '8'">
        <el-input v-model="dataForm.manufacturerColorNumber"></el-input>
      </el-form-item>
      <el-form-item label="尺寸" v-if="dataForm.ctgId != '8'">
        <el-input v-model="dataForm.goodsSize"></el-input>
      </el-form-item>
      <el-form-item label="工艺类型" v-if="dataForm.ctgId == '1'">
        <el-select v-model="dataForm.craftType" clearable>
          <el-option v-for="item in craftTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="镜架材质" v-if="dataForm.ctgId == '1'">
        <el-select v-model="dataForm.frameMaterial" clearable>
          <el-option v-for="item in frameMaterialData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购年份">
        <el-input v-model="dataForm.purchaseDate" placeholder="年份后两位+两位月份"></el-input>
      </el-form-item>
      <el-form-item label="配件类型" v-if="dataForm.ctgId == '2'">
        <el-select v-model="dataForm.accessoriesType" clearable>
          <el-option v-for="item in bizData.accessoryTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料分类" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.lensMaterial" clearable>
          <el-option v-for="item in bizData.lensMaterial" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="折射率" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.refractiveIndex" clearable>
          <el-option v-for="item in bizData.refractivityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="镜片分类" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.photometricClassification" clearable>
          <el-option v-for="item in bizData.photometricClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用类型" v-if="dataForm.ctgId == '4'">
        <el-select v-model="dataForm.useType" clearable>
          <el-option v-for="item in bizData.useType" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抛弃类型" v-if="dataForm.ctgId == '4'">
        <el-select v-model="dataForm.disusedClassification" clearable>
          <el-option v-for="item in bizData.disusedClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="球镜范围" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="柱镜范围" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.columnMirrorMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.columnMirrorMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="定做状态" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-select v-model="dataForm.customizeType" clearable>
          <el-option v-for="item in bizData.customizeTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓位名称" clearable>
        <el-select v-model="dataForm.stockIds" multiple collapse-tags @change="changeSelect" style="width: 249px" v-if="this.radio != '2'">
          <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
          <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
        <el-radio-group v-model="radio" style="margin-left: 15px;" @change="changeStock">
          <el-radio :label="'2'">不分仓</el-radio>
          <el-radio :label="'1'">启用仓</el-radio>
          <el-radio :label="'0'">停用仓</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品状态">
        <el-select v-model="dataForm.status" size="mini" clearable>
          <el-option v-for="item in statusOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="零售价格">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.goodsPriceMin" size="mini"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.goodsPriceMax" size="mini"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="库存预警状态">
        <el-select v-model="dataForm.warningStatus" size="mini" clearable>
          <el-option v-for="item in warningStatusOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <supply-search v-if="supplyVisible" ref="supplySearch" @refreshData="updateSearchForm"></supply-search>
    <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
    <info-index v-if="infoVisible" ref="info"></info-index>
  </div>
</template>

<script>
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { inventoryDetailFetchList } from '@/api/eims/storage'
  import { getCtgList } from '@/api/eims/ctg'
  import { getStockList } from '@/api/eims/stock'
  
  import SelectBrand from './SearchBrand'
  import SupplySearch from './supply-search'
  import InfoIndex from './comprehensive-check-info'

  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        checked: false,
        selectBrandVisible: false,
        infoVisible: false,
        frameMaterialData: [],
        craftTypeData: [],
        dataForm: {
          queryPoint: '2',
          groupFlag: '1',
          quantityCheck: 1,
          brandName: '',
          supplyName: '',
          stockIds: []
        },
        quantityCheckOptions: [{
            label: '显示库存所有的商品',
            value: 0
          },
          {
            label: '忽略库存为0的商品',
            value: 1
          },
          {
            label: '显示库存=0的商品',
            value: 2
          },
          {
            label: '显示库存>0的商品',
            value: 3
          },
          {
            label: '显示库存<0的商品',
            value: 4
          }
        ],
        warningStatusOptions: [{
            label: '小于等于红色预警',
            value: 1
          },
          {
            label: '大于红色预警小于库存量下限',
            value: 2
          },
          {
            label: '大于等于库存量下限并小于等于库存量上限',
            value: 3
          },
          {
            label: '大于库存量上限',
            value: 4
          }
        ],
        statusOptions: [{
            label: '启用',
            value: '1'
          },
          {
            label: '停用',
            value: '0'
          }
        ],
        radio: '1',
        dataList: [],
        // pageIndex: 1,
        // pageSize: 100,
        // totalPage: 0,
        ctgOptions: [],
        stockOptions: [],
        oldStockIds: [],
        dataListLoading: false,
        addOrUpdateVisible: false,
        supplyVisible: false,
      }
    },
    components: {
      SupplySearch,
      SelectBrand,
      InfoIndex
    },
    computed: {
      ...mapGetters(['permissions', 'bizData'])
    },
    methods: {
      searchHandle() {
        remote('frame_material').then(response => {
          this.frameMaterialData = response.data.data
        })
        remote('craft_type').then(response => {
          this.craftTypeData = response.data.data
        })
        this.getCtgOptions()
        this.getStockOptions()
      },
      //  清空查询查询表单
      searchReset() {
        for (let key in this.dataForm) {
          if (key == 'quantityCheck') {
            this.dataForm[key] = 1
          } else if (key == 'queryPoint') {
            this.dataForm[key] = '2'
          } else if (key == 'groupFlag') {
            this.dataForm[key] = '1'
          } else {
            this.dataForm[key] = ''
          }
        }
      },
      //获取查询结果
      getDataList() {
        if (this.dataForm.stockIds.indexOf(0) > -1) {
          var index2 = this.dataForm.stockIds.indexOf(0);
          this.dataForm.stockIds.splice(index2, 1)
        }
        if (this.dataForm.ctgId == '3' || this.dataForm.ctgId == '4') {
          this.dataForm.customizeType = this.dataForm.customizeType
        }
        let data = this.dataForm
        this.infoVisible = true
        this.$nextTick(() => {
          this.$refs.info.init(data)
        })
      },
      //获取商品类别列表
      getCtgOptions() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //  获取仓位列表
      getStockOptions() {
        let data = {
          status: this.radio
        }
        if (this.radio == 2) {
          this.dataForm.stockIds = []
        }
        getStockList(data).then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //仓位状态选择
      changeStock() {
        this.dataForm.stockIds = []
        this.getStockOptions()
      },
      //商品类别改变事件
      ctgIdChange() {
        this.supplyId = ''
        this.dataForm.supplyId = ''
        this.dataForm.supplyName = ''
        this.dataForm.brandId = ''
        this.dataForm.brandName = ''
      },
      //获取制造商列表
      chooseSupply() {
        this.supplyVisible = true
        this.$nextTick(() => {
          if (this.dataForm.ctgId) {
            this.$refs.supplySearch.init(this.dataForm.ctgId)
          } else {
            this.$refs.supplySearch.init()
          }

        })
      },
      updateSearchForm(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.brandId = ''
        this.dataForm.brandName = ''
        this.dataForm.brandCode = ''
      },
      // 获取商品品种信息
      getBrandList() {
        if (!this.dataForm.ctgId) {
          this.$message.warning('请选择商品类别')
          return false
        }
        if (!this.dataForm.supplyId) {
          this.$message.warning('请选择制造商')
          return false
        }
        let data = {
          ctgId: this.dataForm.ctgId,
          supplyId: this.dataForm.supplyId
        }
        this.selectBrandVisible = true
        this.$nextTick(() => {
          this.$refs.selectBrand.init(data)
        })
      },
      //  更新表单品种信息
      updateFormBrand(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
        this.dataForm.brandCode = data.code
        // this.dataForm.name = data.name
        // this.dataForm.unitType = data.unitType
      },
      selectAll() {
        this.dataForm.stockIds = []
        if (this.checked) {
          this.stockOptions.map((item) => {
            this.dataForm.stockIds.push(item.id)
          })
        } else {
          this.dataForm.stockIds = []
        }
      },
      changeSelect(val) {
        if (val.length === this.stockOptions.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    background-color: #cadee8;
    padding-left: 5px;
    padding-top: 5px;
  }

  .el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 20px;
  }
</style>
